<template>
    <div class="person">
        <h2>{{ a }}</h2>
        <h2>{{ p2.a }}</h2>
        <pr/>
        <ul>
            <li v-for="p in list" :index="p.id">
                {{ p.name }} -- {{ p.age }}
            </li>
        </ul>
    </div>
</template>

<!-- 使用typescript定义一个对象标准，然后在vue中引用这个标准 -->
<script lang="ts" setup name="Person">
    
    import {type Persons} from '../types'

    // 接收父组件传递的标签元素(这里的标签元素可以直接在插值语法中使用，但不能再script中使用)
    // 可以使用返回值接收这个元素并使用(是一个大对象，包含声明接收的所有传递元素)
    // let par = defineProps(["a", "list"])

    // 接收的数据限制类型
    // let p1 = defineProps<{list:Persons}>()

    // 限制类型、必要性，指定默认值 
    // withDefaults:指定默认值
    let p2 = withDefaults(defineProps<{list:Persons,a:string}>(), {
        // 这里的语法必须是匿名函数返回数组
        list:()=> [{id: '123465', name: '张三', age: 18}]
    })

    // withDefaults、defineProps语法都可以在不引入的情况下直接使用
   
</script>

<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}
</style>